<template>
    <div>
<div class="register_con">
    <div class="l_con fl">
        <a class="reg_logo"><img src="/static/images/logo.png"></a>
        <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
        <div class="reg_banner"></div>
    </div>

    <div class="r_con fr">
        <div class="reg_title clearfix">
            <h1>用户注册</h1>
            <a href="/login.html">登录</a>
        </div>
        <div class="reg_form clearfix" id="app" v-cloak>
            <form @submit.prevent="on_submit">
                <ul>
                    <li>
                        <label>用户名:</label>
                        <input type="text" v-model="username" name="user_name" id="user_name">

                    </li>
                    <li>
                        <label>密码:</label>
                        <input type="password" v-model="password1"  name="pwd" id="pwd">
                
                    </li>
                    <li>
                        <label>确认密码:</label>
                        <input type="password" v-model="password2"  name="cpwd" id="cpwd">
                        
                    </li>
                    <li>
                        <label>手机号:</label>
                        <input type="text" name="phone" v-model="phone"  id="phone">
                       
                    </li>
                    <li>
                        <label>头像:</label>
                        <input type="file"  id="img">
                       
                    </li>
                    <li>
                        <label>验证码:</label>
                        <input type="text"  id="code"><img :src="image_url" @click="image_img">
                        
                       
                    </li>
                    <!-- <li>
                        <label>短信验证码:</label>
                        <input type="text" v-model="sms_code" @blur="check_sms_code" name="msg_code" id="msg_code" class="msg_input">
                        <a href="javascript:;" @click="send_sms_code" class="get_msg_code">{{ sms_code_tip }}</a>
                        <span v-show="error_sms_code" class="error_tip">{{ sms_code_error_tip }}</span>
                    </li> -->
                    <!-- <li class="agreement">
                        <input type="checkbox" v-model="allow" @change="check_allow" name="allow" id="allow" checked="checked">
                        <label>同意”美多商城用户使用协议“</label>
                        <span v-show="error_allow" class="error_tip2">请勾选同意</span>
                    </li> -->
                    <li class="reg_sub">
                        <input type="button" value="注 册" name="" @click="register">
                    </li>
                </ul>
            </form>
        </div>

    </div>

</div>

    <food></food>
    </div>
</template>

<script>
import axios from 'axios'
import food from './food'
export default {
    name:'Register',
    components:{
        food
    },
    data() {
        return {
            username:'',
            password1:'',
            password2:'',
            icon:'',
            phone:'',
            code:'',
            image_url:"http://127.0.0.1:8000/app02/image_code"
        }
    },
    methods: {
        image_img(){
            this.image_url = this.image_url +"?x="+Math.random()
        },
        register(){
            // 获取图片信息
            let img = document.getElementById('img').files[0]
            // 实例化一个表单
            let form_data = new FormData()
            // 把数据添加到表单中
            form_data.append('username',this.username)
            form_data.append('password1',this.password1)
            form_data.append('password2',this.password2)
            form_data.append('phone',this.phone)
            form_data.append('icon',img)

            // 往后端发送请求
            axios({
                url:'http://127.0.0.1:8000/app02/register/',
                method:'POST',
                data:form_data
            }).then(res=>{
                console.log(res.data)
            })
        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>
